<script>
  import sheep from '@/sheep';

  export default {
    data() {
      return {
        contents: {},
      };
    },
    name: 'pageHeaderStyle',
    props: {
      info: {
        type: Object,
        default: () => {
        },
      },
      genealogicalInformation: {
        type: Object,
        default: () => {
        },
      },
      current: {
        type: Number,
        default: 0,
      },
      index: {
        type: Number,
        default: 0,
      },
      genealogy_id: {
        type: [Number, String],
        default: 0,
      },
      editFlag: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    async created() {
      if(this.info.desc == 'pendantDiagram'){

      }else{
        const { data } = await sheep.$api.book_list.getBookPage({
          genealogy_id: this.genealogy_id,
          page: this.info.page,
        });
        this.contents = data;
        uni.$on('upLoadPhotoCate', (data) => {
          if (data.index == this.index) {
            this.contents.content.push({
              image: data.data.image,
            });
            // uni.downloadFile({
            //   url: data.data.image,
            //   success: res => {
            //     // #ifdef MP-WEIXIN
            //     wx.getFileSystemManager().saveFile({
            //       tempFilePath: res.tempFilePath,
            //       success: async (res) => {
            //         const { code, msg } = await sheep.$api.book_list.addImageCache({
            //           id: data.data.id,
            //           type: 'we',
            //           content: res.savedFilePath,
            //         });
            //         console.log(data);
            //         let obj = data.data;
            //         obj.we_image = res.savedFilePath;
            //         this.contents.content.push(obj);
            //       },
            //       fail: (err) => {
            //         console.log(err);
            //       },
            //     });
            //     // #endif
            //   },
            // });
          }
        });
        if (this.info.desc == 'content' && this.info.sys_id == 2) {
          uni.$on('deleteImage', (data) => {
            this.contents.content.forEach((item, index) => {
              if (data.item.id == item.id) {
                this.contents.content.splice(index, 1);
              }
            });
          });
          this.contents.content.forEach((item, index) => {
            // 图片缓存
            if (!item.we_image) {
              this.contents.content[index].we_image = item.image;
              // uni.downloadFile({
              //   url: item.image,
              //   success: res => {
              //     // #ifdef MP-WEIXIN
              //     wx.getFileSystemManager().saveFile({
              //       tempFilePath: res.tempFilePath,
              //       success: async (res) => {
              //         console.log(res);
              //         const { code, msg } = await sheep.$api.book_list.addImageCache({
              //           id: item.id,
              //           type: 'we',
              //           content: res.savedFilePath,
              //         });
              //         console.log(data);
              //         this.contents.content[index].we_image = res.savedFilePath;
              //       },
              //       fail: (err) => {
              //         this.contents.content[index].we_image = item.image;
              //       },
              //     });
              //     // #endif
              //   },
              // });
            } else {
              this.contents.content[index].we_image = item.image;
              // wx.getFileSystemManager().access({
              //   path: item.we_image,
              //   fail: (err) => {
              //     uni.downloadFile({
              //       url: item.image,
              //       success: res => {
              //         // #ifdef MP-WEIXIN
              //         wx.getFileSystemManager().saveFile({
              //           tempFilePath: res.tempFilePath,
              //           success: async (res) => {
              //             console.log(res);
              //             const { code, msg } = await sheep.$api.book_list.addImageCache({
              //               id: item.id,
              //               type: 'we',
              //               content: res.savedFilePath,
              //             });
              //             this.contents.content[index].we_image = res.savedFilePath;
              //           },
              //           fail: (err) => {
              //             this.contents.content[index].we_image = item.image;
              //           },
              //         });
              //         // #endif
              //       },
              //     });
              //   },
              // });
            }
          });
        }
        if (this.info.desc == 'content' && this.info.sys_id == 3) {
          uni.$on('upLoadPersonPhoto', (data) => {
            if (!this.contents) {
              return;
            }
            if (!this.contents.content) {
              return;
            }
            if (typeof this.contents.content != 'object') {
              return;
            }
            if (this.contents.content.length <= 0) {
              return;
            }
            this.contents.content.forEach(item => {
              if (data.flag == 1) {
                if (data.data.relation_id == item.id) {
                  item.image = data.data.image;
                }
              } else {
                if (data.data.relation_id == item.qz_id) {
                  item.qz_image = data.data.image;
                }
              }
            });
          });
        }
      }
    },
    methods: {
      editor() {
        this.$emit('editor', { info: this.info, content: this.contents });
      },
      blowUp() {
        uni.$emit('blowUp');
      },
    },
  };
</script>

<template>
  <view class="wh_710 flex-sub flex align-center justify-between"
        style="border: 4rpx solid #BF8257;position: relative;overflow: hidden;height: 100%;"
  >
    <!-- 左上角图标 -->
    <image class="topLeftIcon wh_80 hW_80" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
    <!-- 右上角图标 -->
    <image class="topRightIcon wh_80 hW_80" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
    <view class="ml_20" style="height: 100%;width: 2rpx;background: #BF8257;"></view>
    <view class="flex-sub" style="height: 100%;width: 100%;display: grid;position: relative">
      <slot name="content" :item="info" :content="contents"></slot>
      <view class="wh_123 hW_40 flex align-center justify-center z_10"
            v-if="contents.desc == 'content' && info.sys_id != 2  && info.sys_id != 3"
            style="position: absolute;right: 10rpx;bottom: 4rpx;background: rgba(255,66,6);border-radius: 36rpx;"
            @click.stop="editor()"
      >
        <image :src="`${IMG_URL}/index/book_list_edit_FFF.png`"
               class="wh_22 hW_23"
        ></image>
        <view class="fs_22 fw_500 color_FFFFFF ml_10">
          编辑
        </view>
        <!--        <image :src="`${IMG_URL}/index/cate_bg_all.png`" class="wh_25 hW_26"-->
        <!--               @start.stop-->
        <!--               @touchmove.stop-->
        <!--               @touchend.stop="blowUp()"-->
        <!--               @touchcancel.stop-->
        <!--               @mousedown.stop-->
        <!--               @mousemove.stop-->
        <!--               @mouseup.stop-->
        <!--        ></image>-->
      </view>
    </view>
    <view class="wh_68 pageHeader flex justify-evenly flex-column"
          style="height: 100%;border-left: 2rpx solid #BF8257;">
      <view class="fs_36 fw_500 color_4B4B4B  flex align-center justify-center"
            style="text-align: center"
      >
        <view class="wh_36">{{ genealogicalInformation.title }}</view>
      </view>
      <view class="flex align-center flex-column">
        <view class="hW_2" style="width: 100%;background: #BF8257"></view>
        <view class="hW_15 mt_5" style="width: 100%;background: #BF8257"></view>
      </view>
      <view class="fs_36 fw_500 color_4B4B4B  flex align-center justify-center"
            style="text-align: center;"
      >
        <view class="wh_36">{{ genealogicalInformation.branch }}</view>
      </view>
      <view class="flex align-center flex-column">
        <view class="hW_2" style="width: 100%;background: #BF8257"></view>
        <view class="hW_15 mt_5" style="width: 100%;background: #BF8257"></view>
      </view>
      <view class="fs_36 fw_500 color_4B4B4B flex align-center justify-center"
            style="text-align: center;"
      >
        <view class="wh_36">
          {{ genealogicalInformation.hall_num }}
        </view>
      </view>
      <view class="flex align-center flex-column">
        <view class="hW_2" style="width: 100%;background: #BF8257"></view>
        <view class="hW_15 mt_5" style="width: 100%;background: #BF8257"></view>
      </view>
      <view class="fs_36 fw_500 color_4B4B4B"
            style="text-align: center;"
      >
        {{ info.page }}
      </view>
    </view>
    <!-- 左下角 -->
    <image class="lowerLeftIcon wh_80 hW_80" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
    <!-- 右下角图标 -->
    <image class="lowerRightIcon wh_80 hW_80" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
  </view>
</template>

<style scoped lang="scss">
  .topLeftIcon {
    position: absolute;
    top: -4rpx;
    left: -4rpx;
    transform: rotate(0);
  }

  .topRightIcon {
    position: absolute;
    top: -4rpx;
    right: -4rpx;
    transform: rotate(90deg);
  }

  .lowerLeftIcon {
    position: absolute;
    bottom: -4rpx;
    left: -4rpx;
    transform: rotate(-90deg);
  }

  .lowerRightIcon {
    position: absolute;
    bottom: -4rpx;
    right: -4rpx;
    transform: rotate(180deg);
  }

  .pageHeader {

  }
</style>